<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" v-model="searchForm">
      <el-form-item label="来源">
        <yu-select
          select
          :options="sysRule"
          v-model:value="searchForm.ruleId"
          lab="ruleName"
          val="ruleId"
        />
      </el-form-item>
      <el-form-item>
        <el-form-item label="作者或书名">
          <el-input
            v-model="searchForm.bookName"
            placeholder="作者或书名"
          ></el-input>
        </el-form-item>

        <el-button type="primary" @click="queryBook">查询</el-button>
      </el-form-item>
    </el-form>

    <yu-table
      ref="yuTable"
      :tableData="tableData"
      :columns="tableData.columns"
      @getSelectionRows="getSelectionRows"
    >
      <template v-slot:bookDetail="{ scopeData }">
        <el-button
          text
          size="small"
          type="primary"
          @click="showDetail(scopeData.row)"
        >
          {{ scopeData.row.bookName }}
        </el-button>
      </template>
    </yu-table>
    <yu-dialog :data="dialogConfig" v-model:isShow="isShow">
      <sys-book-detail :bookInfo="bookInfo"></sys-book-detail>
    </yu-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from 'vue';
import SysBookDetail from './SysBookDetail.vue';
let { proxy } = getCurrentInstance();
const sysRule = ref({});
const searchForm = reactive({ ruleId: '' });
const isShow = ref(false);
const dialogConfig = reactive({});
const bookInfo = ref({});
const tableData = reactive({
  data: [],
  columns: [],
  tableArrts: { haspage: true },
});
tableData.columns = [
  { type: 'selection' },
  { title: '书名', key: 'bookName', align: 'left', slot: 'bookDetail' },
  { title: '作者', key: 'bookAuthor', align: 'center' },
  { title: '类型', key: 'bookKind', align: 'center' },
  { title: '状态', key: 'bookState', align: 'center' },
  { title: '加入日期', key: 'createDate', align: 'center' },
];

onMounted(() => {
  //显示区域
  sysRuleDict();
});
const sysRuleDict = async () => {
  proxy.$api.rule.getSysRule().then(res => {
    sysRule.value = res;
  });
};
const queryBook = () => {
  proxy.$api.rule.queryBookMain(searchForm).then(res => {
    tableData.data = res;
  });
};
const showDetail = row => {
  isShow.value = true;
  dialogConfig.title = row.bookName;
  dialogConfig.width = '60%';
  bookInfo.value = row;
};
</script>
<style lang="scss" scoped></style>
